<template>
  <div class="app-container">
    <ManageTitle name="林支持" role="管理员" />
    <el-form class="mt20" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-row>
        <el-col :span="2.5">
          <el-form-item prop="groupId">
            <el-select v-model="queryParams.groupId" style="width: 100%;">
              <el-option
                v-for="item in groupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item prop="searchStr">
            <el-input
              v-model="queryParams.searchStr"
              placeholder="请输入锁名称"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            >
              <template #append>
                <el-button :icon="Search" @click="handleQuery" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <div style="margin-left: auto;">
          <el-button plain type="primary" @click="handleGetPassword">获取密码</el-button>
        </div>
      </el-row>
    </el-form>
    <el-table :data="list" class="mt20" stripe style="width: 100%">
      <el-table-column prop="branchName" label="分组" />
      <el-table-column prop="lockAlias" label="锁名称" />
      <el-table-column prop="senderUsername" label="发送人" />
      <el-table-column prop="keyboardPwd" label="密码" />
      <el-table-column label="发送时间">
        <template #default="{ row }">
          {{ row.startDate }} - {{ row.endDate }}
        </template>
      </el-table-column>
      <el-table-column prop="pwdStatus" label="状态" />
      <el-table-column label="操作" width="220px">
        <template #default="{ row, $index }">
          <el-space>
            <el-button link type="primary" @click="handleSendMessage(row)">短信通知</el-button>
            <el-button link type="primary" @click="handleDelay(row)">修改有效期</el-button>
            <el-button link type="primary" @click="handleRemove(row, $index)">删除</el-button>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <GetPasswordDl
      :visible="getPassword.visible"
      :type="getPassword.type"
      @cancel="handleKeyOperationCancel"
      @ok="handleKeyOperationOk"
    />
    <CreatePasswordDl
      :visible="createPassword.visible"
      @message="handleMessage"
      @email="handleEmail"
    />
    <SendPassword
      :type="sendPassword.type"
      :visible="sendPassword.visible"
      @cancel="() => sendPassword.visible = false"
      @ok="handleSendMessageOk"
    />
    <DelayDl
      :visible="delay.visible"
      :form="delay.form"
      @ok="handleDelayOk"
      @cancel="() => delay.visible = false"
    />
  </div>
</template>
<script setup name="PasswordManage">
import groupApi from '@/api/setting/group'
import ManageTitle from '../component/manageTitle.vue'
import { Search } from '@element-plus/icons-vue'
import GetPasswordDl from './getPasswordDl.vue'
import CreatePasswordDl from './createPasswordDl.vue'
import SendPassword from '@/components/SendPassword/index.vue'
import DelayDl from './delayDl.vue'
import { deepClone } from '@/utils/index'

const groupOptions = ref([])
const list = ref([])
const loading = ref(false)
const total = ref(0)
const data = reactive({
  queryParams: {
    groupId: null,
    searchStr: null,
    pageNum: 1,
    pageSize: 10
  },
  getPassword: {
    visible: false,
    type: 'add'
  },
  createPassword: {
    visible: false
  },
  sendPassword: {
    visible: false,
    type: null
  },
  delay: {
    visible: false,
    form: {}
  }
})
const { queryParams, getPassword, createPassword, sendPassword, delay } = toRefs(data)




/* 搜索 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}


/* 获取密码弹窗操作 */
function handleGetPassword() {
  getPassword.value.type = 'add'
  getPassword.value.visible = true
}
function handleKeyOperationCancel() {
  getPassword.value.visible = false
}
function handleKeyOperationOk(type, value) {
  console.log(value)
  if (type === 'add') {
    console.log('add', value)
    createPassword.value.visible = true
  } else if (type === 'remove') {
    console.log('remove', value)
  }
  getPassword.value.visible = false
}

function handleMessage(value) {
  console.log("发送短信", value);
  createPassword.value.visible = false
  sendPassword.value.type = 'message'
  sendPassword.value.visible = true
}

function handleEmail(value) {
  console.log("发送邮件", value);
  createPassword.value.visible = false
  sendPassword.value.type = 'email'
  sendPassword.value.visible = true
}

/* 发送短信按钮点击事件 */
function handleSendMessage(value) {
  console.log(value);
  sendPassword.value.type = 'message'
  sendPassword.value.visible = true
}

/* 删除密码 */
function handleRemove(row, index) {
  proxy.$modal.confirm('确定删除密码？').then(() => {
    list.value.splice(index, 1)
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {
    console.log('cancel...');
  })
  
}

// 发送密码确认事件
function handleSendMessageOk() {
  sendPassword.value.visible = false
  list.value.push({
    branchName: '分组一',
    lockAlias: '劲叶公寓0101',
    senderUsername: '林飞吉',
    keyboardPwd: '12****',
    startDate: '2024/03/13 12:00',
    endDate: '2024/03/13 22:00',
    pwdStatus: '正常'
  })
}

/* 修改密码有效期弹窗 */
function handleDelay(row) {
  delay.value.form = deepClone(row)
  delay.value.visible = true
}
function handleDelayOk(params) {
  console.log(params)
  delay.value.visible = false
}

function getList() {
  console.log('获取列表数据');
}

// 获取分组列表
function getGroupList() {
  groupApi.getList().then(res => {
    groupOptions.value = res.rows.map(item => ({
      label: item.groupName,
      value: item.groupId
    }))
    groupOptions.value.unshift({
      label: '全部片区',
      value: ''
    })
    // queryParams.value.groupId = groupOptions.value[0].value
  })
}
getGroupList()
</script>
